<template>
  <div class="app-container">
    <div class="queryContent">
      <el-form :inline="true" ref="logForm" :model="logForm" label-width="80px">
        <el-form-item label="登录账号">
          <el-input v-model="logForm.loginId" placeholder="登录账号" clearable/>
        </el-form-item>

        <el-form-item label="登录IP">
          <el-input v-model="logForm.loginIp" placeholder="登录IP" clearable/>
        </el-form-item>

        <el-form-item label="登录状态">
          <el-select v-model="logForm.status" placeholder="登录状态" clearable>
            <el-option
              v-for="item in logStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="登录时间">
          <el-date-picker
            v-model="loginTime"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

      </el-form>
    </div>

    <div class="buttonContent">
      <el-form :inline="true" label-width="80px">
        <el-row>
          <el-col :span="21">
            <el-button type="primary" @click="download" icon="el-icon-download">导出</el-button>
          </el-col>
          <el-col :span="3" style="text-align: right;">
            <el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="onReset" icon="el-icon-refresh-right">重置</el-button>
          </el-col>
        </el-row>
      </el-form>

    </div>

    <div class="tableContent">
      <el-table :data="userList" border style="width: 100%;" :header-cell-style="this.$customUi.grid.title"
                :cell-style="this.$customUi.grid.cell" :style="this.$customUi.grid.style">

        <el-table-column show-overflow-tooltip prop="id" label="日志编号" width="80px"></el-table-column>

        <el-table-column show-overflow-tooltip prop="loginId" label="登录账号"></el-table-column>

        <el-table-column show-overflow-tooltip prop="creatorIp" label="登录IP"></el-table-column>

        <el-table-column show-overflow-tooltip prop="creatorAddress" label="登录地点"></el-table-column>

        <el-table-column show-overflow-tooltip prop="browser" label="浏览器"></el-table-column>

        <el-table-column show-overflow-tooltip prop="operatingSystem" label="操作系统"></el-table-column>

        <el-table-column show-overflow-tooltip prop="status" label="登录状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter"> {{scope.row.status | loginStatus}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="message" label="操作信息"></el-table-column>

        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" align="center"></el-table-column>

      </el-table>
    </div>

    <div class="pageContent">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20, 40, 60, 100]"
        :current-page=logForm.current
        :page-size=logForm.size
        :total=total
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import api from '@/api/sysLog'

  export default {
    name: 'login-log',
    components: {},
    data() {
      return {
        logForm: {
          // 当前页
          current: 1,
          // 每页显示条数
          size: 20,
          loginIp: '',
          loginId: '',
          status: '',
          startTime: '',
          endTime: ''
        },
        total: 0,
        userList: [],
        logStatus: [
          {value: '1', label: '成功'},
          {value: '2', label: '失败'},
        ],
        loginTime: ''
      }
    },
    filters: {

      statusFilter(status) {
        const statusMap = {1: 'success', 2: 'danger'}
        return statusMap[status]
      },
      loginStatus(status) {
        const userStatus = {1: '成功', 2: '失败'}
        return userStatus[status]
      }
    },
    created() {
      this.query()
    },
    methods: {
      query(){
        this.logForm.current = 1
        this.onQuery()
      },
      // 查询
      onQuery() {
        var me = this
        if (me.loginTime.length > 0) {
          me.logForm.startTime = moment(me.loginTime[0]).format('yyyy-MM-DD') + " 00:00:00"
          me.logForm.endTime = moment(me.loginTime[1]).format('yyyy-MM-DD') + " 23:59:59"
        }
        api.queryLoginLog(me.logForm).then(response => {
          if (response.status === 200) {
            me.userList = response.data.records
            me.total = response.data.total
          }
        })
      },
      // 导出
      download() {
        var me = this
        if (me.loginTime.length > 0) {
          me.logForm.startTime = moment(me.loginTime[0]).format('yyyy-MM-DD') + " 00:00:00"
          me.logForm.endTime = moment(me.loginTime[1]).format('yyyy-MM-DD') + " 23:59:59"
        }
        api.exportLoginLog(me.logForm).then(response => {
          const blob = new Blob([response.data])
          // 获取 获取响应头 heads 中的 filename 文件名
          const temp = response.headers["content-disposition"].split(";")[1].split("filename=")[1];
          var fileName = decodeURIComponent(temp);
          // 创建一个 a 标签
          const link = document.createElement('a')
          // 不显示a标签
          link.style.display = 'none'
          // 给a 标签的href属性赋值
          link.href = URL.createObjectURL(blob);
          link.setAttribute('download', fileName)
          // 把a标签插入页面中
          document.body.appendChild(link)
          link.click()
          // 点击之后移除a标签
          document.body.removeChild(link)
        })
      },
      // 重置
      onReset() {
        this.logForm.current = 1
        this.logForm.size = 20
        this.logForm.loginIp = ''
        this.logForm.loginId = ''
        this.logForm.status = ''
        this.logForm.startTime = ''
        this.logForm.endTime = ''
        this.loginTime = []
        this.onQuery()
      },

      // 分页
      handleSizeChange(val) {
        this.logForm.size = val
        this.onQuery()
      },
      // 分页
      handleCurrentChange(val) {
        this.logForm.current = val
        this.onQuery()
      },
    }
  }
</script>

<style scoped>
</style>
